import React from 'react'
import { Form, Input, Button, DatePicker, Select } from 'antd'
import moment from 'moment'
import { disabledStartDateWeek, disabledEndDateWeek } from '../batchRecord/Search'
const FormItem = Form.Item
const { Option } = Select

const SendRecordSearch = (props) => {
  const itemStyles = {style:{ width: 120 }}
  const { 
    batchId, 
    messageId, 
    operator, 
    startTime, 
    endTime, 
    phone,  
    status,
    operatorEnum,
    messageStatusEnum,
    onChangeBatchId, 
    onChangeMessageId, 
    onChangePhone,
    onChangeOperator,
    onChangeStatus,
    onChangeStartTime,
    onChangeEndTime,
    onSearch,
  } = props
  
  return (
    <Form layout="inline" style={{padding: 24}}>
      <FormItem  label="批次编号">
        <Input {...itemStyles} placeholder="批次编号" value={batchId} onChange={onChangeBatchId} />
      </FormItem>
      <FormItem label="消息编号">
        <Input {...itemStyles} placeholder="消息编号" value={messageId} onChange={onChangeMessageId}/>
      </FormItem>
      <FormItem label="手机号码">
        <Input {...itemStyles} placeholder="手机号码" value={phone} onChange={onChangePhone} />
      </FormItem>
      <FormItem label="运营商">
        <Select {...itemStyles} value={operator} onChange={onChangeOperator}>
          <Option key="all" value={null}>全部</Option>
          {operatorEnum.map(({ index, desc }) => <Option key={index} value={index}>{desc}</Option>)}
        </Select>
      </FormItem>
      <FormItem label="状态">
        <Select {...itemStyles} value={status} onChange={onChangeStatus}>
          <Option key="all" value={null}>全部</Option>
          {messageStatusEnum.map(({ index, desc }) => <Option key={index} value={index}>{desc}</Option>)}
        </Select>
      </FormItem>
      <FormItem label="开始时间">
        <DatePicker  
          {...itemStyles}
          disabledDate={disabledStartDateWeek.bind(null, endTime)} 
          defaultValue={startTime}
          onChange={onChangeStartTime} 
          allowClear={false} 
        />
      </FormItem> 
      <FormItem label="结束时间">
        <DatePicker  
          {...itemStyles} 
          disabledDate={disabledEndDateWeek.bind(null, startTime)} 
          defaultValue={endTime}
          onChange={onChangeEndTime} 
        />
      </FormItem>
      <FormItem>
        <Button type="primary" onClick={onSearch}>查询</Button>
      </FormItem>
    </Form>
  )
}

export default Form.create()(SendRecordSearch)